<template>
  <div class="my">
    <div class="my-box">
      <div class="my-info">
        <div class="my-img">
          <img class="auto-img" alt="" :src="img" />
        </div>
        <div class="user-info" v-if="isLogin">
          <div class="user-name one-text">{{ loginUser.nickName }}</div>
          <div class="desc one-text">
            {{ text ? text : "这家伙很懒，什么也没有留下！" }}
          </div>
        </div>
        <div class="user-info" v-else>
          <div class="user-name one-text" @click="goLogin">去登录</div>
          <!-- <div class="desc one-text"></div> -->
        </div>
      </div>

      <div class="cell-list">
        <div
          class="cell-list-item"
          v-for="(item, index) in cellListData"
          :key="index"
        >
          <van-cell :title="item.title" is-link />
        </div>
      </div>
    </div>
    <div class="loginout" v-if="isLogin">
      <van-button type="primary" size="small" @click="Loginout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "my",
  data() {
    return {
      text: "",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F10%2F20200410190155_zqwxf.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651754991&t=8e66cac316fab7917bfc3c2695c2e1bb",
      //登录状态
      isLogin: true,
      //用户
      loginUser: [],
      //
      cellListData: [
        {
          title: "个人资料",
          routeName: "Account",
        },
        {
          title: "我的订单",
          routeName: "Order",
        },
        {
          title: "我的收藏",
          routeName: "Like",
        },
        {
          title: "地址管理",
          routeName: "MyAddress",
        },
        {
          title: "安全中心",
          routeName: "Secure",
        },
      ],
    };
  },
  created() {
    this.getLogin();
  },
  methods: {
    //去登录
    goLogin() {
      this.$router.push({ name: "login" });
    },
    //获取登录状态
    getLogin() {
      let loginUserInfo = JSON.parse(localStorage.getItem("loginUserInfo"));
      if (!loginUserInfo) {
        this.isLogin = false;
        this.img =
          "https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM4rU5CtibQTAMK7ibj8k6je3K2W4GoVFJbMu6wYCdXsIVE4tkXH2AfibPZU3D8XQFb46ahm6qTXyltvw/132";
      } else {
        this.loginUser = loginUserInfo[0].user;
      }
    },
    //退出登录
    Loginout() {
      localStorage.removeItem("loginUserInfo");
      this.getLogin();
    },
  },
};
</script>

<style lang="less" scoped>
.my {
  .cell-list-item {
    border-bottom: 1px solid #f0f0f0;
    &:last-child {
      border-bottom: none;
    }
  }
  .cell-list {
    margin-top: 50px;
  }
  .user-name {
    font-weight: bold;
    color: #0c34ba;
  }
  .desc {
    margin-top: 10px;
    color: #666;
  }
  .user-info {
    font-size: 14px;
    margin-left: 20px;
  }
  .my-img {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .my-info {
    display: flex;
    align-items: center;
  }
  .my-bg {
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #e8e8e8;
    position: relative;
  }

  .uploader-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    /deep/ .van-uploader {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__wrapper {
      width: 100%;
      height: 100%;
    }
    /deep/ .van-uploader__upload {
      margin: 0;
      width: 100%;
      height: 100%;
    }
  }
  .loginout {
    width: 90%;
    margin: 0 auto;
  }
  .my-box {
    padding: 10px;
    margin: 0 10px;
    position: relative;
    top: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 35px,
      rgba(255, 255, 255, 1) 35px
    );
  }
}
</style>